<template>
  <div :id="name" class="chart-container"></div>
</template>
<script>
import { DualAxes } from '@antv/g2plot'
export default {
  data () {
    return {
      dualAxes: null,
    }
  },
  props: {
    name: {
      type: String,
      default: 'DualAxesCanvas'
    },
    data: {
      type: Array,
      default: () => []
    },
    yAlias1: {
      type: String,
      default: '补贴总额'
    },
    yAlias2: {
      type: String,
      default: '企业数量'
    },
    unit: {
      type: String,
      default: ' 元'
    }
  },
  mounted() {
    this.dualAxes = new DualAxes(this.name, {
      data: [this.data, this.data],
      xField: 'x',
      yField: ['y1', 'y2'],
      geometryOptions: [
        {
          geometry: 'line',
          smooth: true,
          lineStyle: {
            lineWidth: 2,
          },
          color: '#019cf6',
        },
        {
          geometry: 'column',
          color: '#fb7293',
        }
      ],
      yAxis: {
        y1: {
          grid: {
            line: {
              style: {
                stroke: 'white',
                lineWidth: 1,
                lineDash: [4, 4],
                opacity: 0.25,
                cursor: 'pointer'
              }
            }
          }
        },
        y2: {
          tickCount: 2,
          label: {
            formatter: (v) => {
              return `${v}家`;
            },
          },
        }
      },
      meta: {
        x: {
          alias: '月份',
        },
        y1: {
          alias: this.yAlias1,
          formatter: (v) => `${v}`.replace(/\d{1,3}(?=(\d{3})+$)/g, (s) => `${s},`),
        },
        y2: {
          alias: this.yAlias2,
          formatter: (v) => `${v}`.replace(/\d{1,3}(?=(\d{3})+$)/g, (s) => `${s},`),
        }
      }
    })
    this.dualAxes.render()
  },
  methods: {
    thousands: function (num) {
      var str = num.toString();
      var reg = str.indexOf(".") > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g;
      return str.replace(reg,"$1,");
    }
  }
}
</script>
<style lang="scss" scoped>
.chart-container {
  width: 100%;
  height: 100%;
}
</style>
